<template>
  <Layout style="height: 100%" class="main">
    <Header class="header-con">
        <header-bar :collapsed="collapsed" @on-coll-change="handleCollapsedChange">
          <user :user-avatar="userAvatar"/>
          <!-- <language v-if="$config.useI18n" @on-lang-change="setLocal" style="margin-right: 10px;" :lang="local"/> -->
          <!-- <error-store v-if="$config.plugin['error-store'] && $config.plugin['error-store'].showInHeader" :has-read="hasReadErrorPage" :count="errorCount"></error-store> -->
          <!-- <fullscreen v-model="isFullscreen" style="margin-right: 10px;"/> -->
        </header-bar>
      </Header>
    <Layout class="main-layout-con">
      <Sider hide-trigger collapsible :width="200" :collapsed-width="66" v-model="collapsed" class="left-sider" >
        <side-menu accordion ref="sideMenu" :active-name="$route.name" :collapsed="collapsed" @on-select="turnToPage" :menu-list="menuList" @aaa="collapsed=!collapsed">
          <!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 -->
          <div class="logo-con" :class="!collapsed ? 'logo-con-padding':''">
            <!-- <img v-show="!collapsed" :src="maxLogo" key="max-logo" /> -->
            <!-- <img v-show="collapsed" :src="minLogo" key="min-logo" /> -->
            <div v-show="!collapsed">
              <img class="big" src="http://sfile.9mededu.com/mtt_teacher_web_test/dist/static/img/logos.88b9919.png" key="max-logo" />
            </div>
            <div v-show="collapsed">
              <img class="small"  src="http://sfile.9mededu.com/mtt_teacher_web_test/dist/static/img/logos.88b9919.png" key="max-logo" />
            </div>
          </div>
        </side-menu>
        
      </Sider>
      
      <Content class="content-wrapper">
        <!-- <keep-alive :include="cacheList"> -->
          <router-view/>
        <!-- </keep-alive> -->
      <ABackTop :height="100" :bottom="80" :right="50" container=".content-wrapper"></ABackTop>
      </Content>
    </Layout>
  </Layout>
</template>
<script>
import SideMenu from './components/side-menu'
import HeaderBar from './components/header-bar'
import User from './components/user'
import ABackTop from './components/a-back-top'
import Fullscreen from './components/fullscreen'
import Language from './components/language'
import { mapMutations, mapActions, mapGetters } from 'vuex'
import { getNewTagList, routeEqual } from '@/libs/util'
import minLogo from '@/assets/images/logo-min.jpg'
import maxLogo from '@/assets/images/logo.jpg'
import './main.less'
export default {
  name: 'Main',
  components: {
    SideMenu,
    HeaderBar,
    Language,
    Fullscreen,
    User,
    ABackTop
  },
  data () {
    return {
      collapsed: false,
      minLogo,
      maxLogo,
      isFullscreen: false
    }
  },
  computed: {
    userAvatar () {
      return this.$store.state.user.avatarImgPath
    },
    menuList () {
      return this.$store.getters.menuList
    },
    local () {
      return this.$store.state.app.local
    },
  },
  methods: {
    ...mapMutations([
      'setTagNavList',
      'setLocal',
      'setHomeRoute',
    ]),
    turnToPage (route) {
      let { name, params, query } = {}
      if (typeof route === 'string') name = route
      else {
        name = route.name
        params = route.params
        query = route.query
      }
      if (name.indexOf('isTurnByHref_') > -1) {
        window.open(name.split('_')[1])
        return
      }
      this.$router.push({
        name,
        params,
        query
      })
    },
    handleCollapsedChange (state) {
      this.collapsed = state
    },
  },
  watch: {
    '$route' (newRoute) {
      const { name, query, params, meta } = newRoute
      this.$refs.sideMenu.updateOpenName(newRoute.name)
    }
  },
  mounted () {
    // 设置初始语言
    this.setLocal(this.$i18n.locale)
  }
}
</script>
